* {
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(200deg, #deecdd, #74ebaa);
}
.container {
    width: 300px;
    height: 640px;
    .img-box {
        position: relative;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.1);
        transition: 0.5s;
    }
    img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-color: #646464;
        transition: 0.5s;
    }
    &:hover {
        .img-box {
            transform: rotate(-30deg) skew(25deg) scale(0.8);
        }
        @for $i from 1 to 5 {
            img:nth-child(#{$i}) {
                transform: translate($i * 40px, $i * -40px);
                opacity: 0.2 + $i * 0.2;
                transition-delay: 0.5s;
            }
        }
    }
}
